<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jiang's blog</title>
	<style type="text/css">
		body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form,fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
		body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
		h1, h2, h3, h4, h5, h6{ font-size:100%; } 
		address, cite, dfn, em, var { font-style:normal; } 
		code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
		small{ font-size:12px; } 
		ul, ol { list-style:none; } 
		a { text-decoration:none; } 
		a:hover { text-decoration:none; } 
		sup { vertical-align:text-top; } 
		sub{ vertical-align:text-bottom; } 
		legend { color:#000; } 
		fieldset, img { border:0; display: block;} 
		button, input, select, textarea { font-size:100%; } 
		table { border-collapse:collapse; border-spacing:0; }
	</style>
	<style type="text/css">
		body{
			background-color: #efefef;
		}

		header{
			width: 1100px;
			height: 77px;
			padding:40px 40px;
			margin:  0 auto;
		}
		header h1{
			font-family: inherit;
			font-size: 45px;
			font-weight: bold;
			text-transform: none;
		}
		header h3{
			font-family: inherit;
			font-size: 15px;
			color: #999999;
			font-weight: bold;
			text-transform: none;
		}
		nav {
			background-color: #222222;
			height: 60px;
		}

		nav ul{
			height: 60px;
			width: 1100px;
			margin: 0 auto;
		}
		nav li{
			float: left;
		}
		nav a:hover{
			background-color: #3f3f3f;
			text-decoration: none;
		}
		nav a {
			display:  block;
			padding: 0 20px;
			line-height:  60px;
			color: white;
			text-decoration: none;
			font-family: inherit;
			font-size: 15px;
		}

		#main{
			width: 1100px;
			height: 600px;
			background-color: red;
			margin: 0 auto;
		}
		#lside{
			width: 820px;
			height: 500px;
			background-color: black;
			float: left;
		}
		#rside{
			width: 275px;
			height: 500px;
			background-color: blue;
			float: right;

		}
		aside{
			background-color: white;
			margin-bottom: 20px;
			padding: 40px;
		}
		aside h4{
			margin-bottom: 30px;
			font-size: 20px;
			font-family: "微软雅黑","文泉驿正黑","黑体",sans-serif;
			font-weight: normal;
    		text-transform: none;
		}
		#rside li {
			height: 30px;
		}
		#rside a{
			color: #1e73be;
			font-family: inherit;
			font-size:100%;
		}
		#rside a:hover{
			color: black;
		}
		aside input {
			border: 1px solid #ccc;
			font-size: 17px;
			padding: 10px 15px;
			font-family:  Open Sans;
			font-style: #ccc;

		}
		#faside {
			margin-top: 20px;
		}
		#fpage{

		}
		footer{
			background: #222;
			box-sizing:border-box;
			height: 65px;
			text-align: center;
			color: white;
			font-size: 25px;
			padding: 20px 0px;
		}
	</style>
</head>
<body>
	<header>
		<h1>赵江的博客</h1>
		<h3>生活不止眼前的苟且</h3>
	</header>
	<nav>
		<ul>
			<li><a href="">导航1</a></li>
			<li><a href="">导航2</a></li>
			<li><a href="">导航3</a></li>
			<li><a href="">导航4</a></li>
		</ul>
	</nav>
	<div id="main">
		<div id="lside"></div>
		<div id="rside">
			<aside  id='faside' >
				<form action=''>
					<input type='text' name='search' placeholder="Search …">
				</form>
			</aside>


			<aside>
				<h4>文章大标题</h4>
				<ul>
					<li><a href="">文章标题1</a>(1)</li>
					<li><a href="">文章标题2</a>(1)</li>
					<li><a href="">文章标题3</a>(1)</li>
					<li><a href="">文章标题4</a>(1)</li>
					<li><a href="">文章标题5</a>(1)</li>
				</ul>
			</aside>
			<aside>
				<h4>文章大标题</h4>
				<ul>
					<li><a href="">文章标题1</a>(1)</li>
					<li><a href="">文章标题2</a>(1)</li>
					<li><a href="">文章标题3</a>(1)</li>
					<li><a href="">文章标题4</a>(1)</li>
					<li><a href="">文章标题5</a>(1)</li>
				</ul>
			</aside>
			<aside>
				<h4>文章大标题</h4>
				<ul>
					<li><a href="">文章标题1</a>(1)</li>
					<li><a href="">文章标题2</a>(1)</li>
					<li><a href="">文章标题3</a>(1)</li>
					<li><a href="">文章标题4</a>(1)</li>
					<li><a href="">文章标题5</a>(1)</li>
				</ul>
			</aside>
		</div>
		<div id='fpage'>
			<span>page</span>
			<a href="#">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">next</a>
		</div>
	</div>

	<footer>
	Copyright &copy; 2017 · jiang · taiyuan
	</footer>
</body>
</html>